const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  mode : "development",
  entry : path.resolve(__dirname , "./src/main.ts"),
  output : {
    path : path.resolve(__dirname , "dist"),
    filename : "[name]build.js",
    clear : true,   // 自动将上次打包的内容清空
  },
  module : {
    rules : [
      {
        test : /\.css$/i,
        use : ["style-loader" , "css-loader"],
      },
      {
        test : /\.ts$/i,
        use : ["ts-loader"],
      },
      {
        test : /\.s[a|c]ss$/i,
      }
    ]
  },
  plugins : [
    new HtmlWebpackPlugin({
      inject : "body",
      template:path.resolve(__dirname , "./public/index.html")
    })
  ],
  devServer : {
    host : "127.0.0.1" , 
    port : 8080,
    open : true,
    hot : true,
    compress : true,
  },
  resolve : {
    alias : {
      "@" : path.resolve(__dirname , "src"),
    },
    // 配置省略文件路径的后缀名
    extensions : [".ts" , ".js" , ".cjs" , ".json"],
    // 告诉webpack,解析模块失去去找哪个目录
    modules : [path.resolve(__dirname , "./node_modules")] // 迅速找到 node_modules
  }
}